﻿@*
    author Hws
*@
@{
    ViewData["Title"] = "LyAdmin";
    Layout = ""; 
}
<!DOCTYPE html>
<html>
<head>
    <title>LyAdmin</title>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" type="image/x-icon" href="/images/admin/favicon.ico" />
    <script type="text/javascript">
        var basePath = '@ViewData["basePath"]';
    </script>
    <link rel='stylesheet' href='https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css' />
    <link rel='stylesheet' href='/css/admin/default.css' />
    <link rel='stylesheet' href='https://at.alicdn.com/t/font_625704_ctakys56p03haor.css' />
    <script src='/javascript/jquery3.1.1.min.js' type='text/javascript'></script>
    <script src='/javascript/vue.js' type='text/javascript'></script>
    <script src='https://unpkg.com/element-ui@2.13.0/lib/index.js' type='text/javascript'></script>
    <script src='/javascript/custom/label.js' type='text/javascript'></script>
    <script src='/javascript/custom/constant.js' type='text/javascript'></script>
    <script src='/javascript/custom/common.js' type='text/javascript'></script>
    <script src='/javascript/custom/ajax.js' type='text/javascript'></script>
    <script src='/javascript/custom/cache.js' type='text/javascript'></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_625704_4giuk0zv786nipb9.css" />
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .el-header {
            background-color: #373d41;
            color: #333;
            padding: 0;
            text-align: right;
        }

        .el-main {
            color: #333;
            height: 100%;
            padding: 0;
        }

        .el-container {
            height: 100%;
            width: 100%;
        }

        .el-menu-main:not(.el-menu--collapse) {
            width: 200px;
            height: 100%;
            border: 0;
        }

        .el-menu--collapse {
            height: 100%;
            border: 0;
        }

        .fullScreen {
            height: 30px;
            width: 100%;
            text-align: center;
            line-height: 30px;
            background-color: #4a5064 !important;
        }

            .fullScreen i {
                color: #aeb9c2;
            }

            .fullScreen:hover i {
                color: #fff;
            }

        .el-tabs__header {
            margin: 0 0 0px 10px;
        }

        .el-tabs, .el-tab-pane {
            height: 100%;
        }

        .el-tabs__content {
            height: -webkit-calc(100% - 39px);
            height: -moz-calc(100% - 39px);
            height: calc(100% - 39px);
        }


        .el-tabs--border-card > .el-tabs__content {
            padding: 0;
        }

        .el-tabs--border-card {
            border: 0;
        }

        .el-badge .menu-item .iconfont {
            margin-right: 10px;
            margin-left: 10px;
        }

        .el-badge__content.is-fixed {
            top: 12px;
            right: 45px;
        }

        .el-menu-item-group__title {
            padding: 0;
        }

        .headerSeachInput {
            display: table-cell;
            line-height: 50px;
        }

            .headerSeachInput input {
                background-color: #404040;
            }

        .el-header .menu-item {
            font-size: 14px;
            color: #fff;
            padding: 0 20px;
            cursor: pointer;
            box-sizing: border-box;
            height: 50px;
            line-height: 50px;
            position: relative;
            -webkit-box-sizing: border-box;
            white-space: nowrap;
            list-style: none;
            border-right: 1px solid #2a2f32;
        }

        .menu-item .iconfont {
            margin-right: 0px;
            font-size: 22px;
        }

        .menu {
            background-color: rgb(55, 61, 65);
            display: -webkit-inline-box;
            list-style: none;
            position: relative;
            margin: 0;
            padding-left: 0;
        }

            .menu li:hover {
                background-color: #333;
            }

        .el-popover {
            padding: 0;
        }

        .headerIcon img {
            width: 36px;
            height: 36px;
            border-radius: 18px;
            vertical-align: middle;
        }

        .userInfoPropoverRow1 {
            padding: 20px 20px 15px 20px;
            border-bottom: 1px solid #eee;
        }

            .userInfoPropoverRow1 img {
                width: 70px;
                height: 70px;
                border: 3px solid #333;
            }

            .userInfoPropoverRow1 span {
                display: table;
                width: 100%;
                border-bottom: 1px solid #eee;
                margin-bottom: 8px;
                padding-left: 5px;
            }

        .userInfoPropoverRow2 a {
            width: 80px;
            height: 90px;
            float: left;
            text-align: center;
            color: #333;
            text-decoration: none;
        }

            .userInfoPropoverRow2 a:hover {
                background-color: #eee;
            }

        .userInfoPropoverRow2 .logo {
            font-size: 20px;
            line-height: 40px;
            margin: 8px auto 4px;
            width: 40px;
            height: 40px;
            display: block;
        }

        .userInfoPropoverRow2 .title {
        }

        .userInfoPropoverRow2 {
            padding: 20px;
        }

        .userInfoPropoverRow3 {
            background-color: #eee;
            cursor: pointer;
        }

            .userInfoPropoverRow3 a {
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #555;
                text-decoration: none;
            }
    </style>

</head>
<body>
    <div id="app">
        <el-popover ref="popover" placement="bottom" width="270" trigger="hover">
            <el-row class="userInfoPropoverRow1" type="flex">
                <el-col :span="9">
                    <img alt="" src="/images/admin/header.jpg">
                </el-col>
                <el-col :span="15">
                    <span>欢迎回来，</span>
                    <span>{{LoginAdmin.loginId}}</span>
                    <span>登录时间：{{LoginAdmin.dateTime}}</span>
                </el-col>
            </el-row>
            <el-row class="userInfoPropoverRow2" type="flex">
                <el-col :span="8">
                    <a class="topbar-user-entrance" href="javaScript:vm.updatePassword()" target="_target">
                        <span class="logo iconfont icon-lock"></span>
                        <span class="title">修改密码</span>
                    </a>
                </el-col>
                <el-col :span="8">
                    <a class="topbar-user-entrance" href="javascript:;;">
                        <span class="logo iconfont icon-caozuorizhi"></span>
                        <span class="title">查看日志</span>
                    </a>
            </el-row>
            <el-row class="userInfoPropoverRow3" type="flex" v-loading="loginOutLoading">
                <a href="javaScript:loginOut()">退出登录</a>
            </el-row>
        </el-popover>
        <el-container>
            <el-header height='50px'>
                <el-row type="flex">
                    <el-col :span="20" style="text-align:left; padding-left:30px">
                        <img alt="" src="/images/admin/logo.png" style="height:54px;">
                    </el-col>
                    <el-col style="width:250px">
                    </el-col>
                    <el-col style="width:500px;">
                        <ul class="menu">
                            <li class="menu-item headerIcon">
                                欢迎回来：{{LoginAdmin.loginId}} [超级管理员]
                            </li>
                            <li class="menu-item" onclick="vm.updatePassword()">修改密码</li>
                            <li class="menu-item" onclick="logout()">登出系统</li>
                        </ul>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width='200px'>
                    <el-menu unique-opened @@select="menuSelect" :collapse="isCollapse" default-active="1"
                             class="el-menu-main" background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
                        <el-tooltip :content="fullScreenTitle" placement="right">
                            <el-menu-item index="-1" @@click='fullScreen(this)' class="fullScreen">
                                <i :class="fullScreenIcon"></i>
                            </el-menu-item>
                        </el-tooltip>
                        <el-submenu v-for=" item in menus " :index="item.node">
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{item.title}}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item v-for="subItem in item.children" :index="subItem.node">{{subItem.title}}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-tabs :value='tabValue' @@tab-click="tabClick" height="100%" @@tab-remove="tabRemove" type="border-card">
                        <el-tab-pane v-for="item in openTabs" :key="item.name" :name="item.name" :closable="item.closable">
                            <span slot="label"><i :class="item.icon"></i>{{item.title}}</span>
                            <iframe height="100%" width="100%" frameborder="0" scrolling="none" :id="item.name" :src="item.url"></iframe>
                        </el-tab-pane>
                    </el-tabs>
            </el-container>
        </el-container>

        <el-dialog title="修改密码" :visible.sync="updatePasswordDialog" width="500px">
            <el-row style="margin-top:20px;">
                <el-col :span="20">
                    <el-form :model="updatePasswordForm" :rules="updatePasswordRules" label-suffix=":" ref="updatePasswordForm" label-width="100px">
                        <el-form-item label="输入密码" prop="password">
                            <el-input type="password" v-model="updatePasswordForm.password"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="confirmPassword">
                            <el-input type="password" v-model="updatePasswordForm.confirmPassword"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer">
                <el-button @@click="updatePasswordDialog = false">取 消</el-button>
                <el-button type="primary" @@click="updatePasswordSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>

<script>

    var _size = 'medium';
    var _isInitQuery = true;


    var menuDefault = {
        left: true,
        openStyle: 'tab',
        closable: true
    }
    var menus = [];
    var menus = [
        {
            title: '系统管理', node: '9', name: '9', url: '', left: false, icon: 'el-icon-set-up', children: [
                { title: '操作员管理', node: '9-1', name: '91', url: basePath + '/admin/admin/index' },
                { title: '菜单管理', node: '9-2', name: '92', url: basePath + '/admin/authMenu/index' },
                { title: '部门管理', node: '9-3', name: '93', url: basePath + '/admin/authGroup/index' },
                { title: 'App版本设置', node: '9-4', name: '94', url: basePath + '/admin/application/index' },
                { title: '系统自定义设置', node: '9-5', name: '95', url: basePath + '/admin/config/index' }, 
                { title: '操作日志', node: '9-7', name: '97', url: basePath + '/admin/adminLog/index' }
            ]
        }
    ]

    function filter(arr, node) {
        if (arr != null) {
            for (var i in arr) {
                if (arr[i].children) {
                    var result = filter(arr[i].children, node);
                    if (result) return result;
                } else {
                    if (arr[i].node == node) {
                        return arr[i];
                    }
                }
            }
        }
    }

    var checkPassword = function (rule, value, callback) {
        if (value !== vm.updatePasswordForm.password) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };

    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                menus: menus,
                isCollapse: false,
                headerShow: true,
                fullScreenIcon: 'iconfont icon-quanpingzuidahua',
                fullScreenTitle: '收起菜单',
                tabValue: 'main',
                fullScreenShow: false,
                loginOutLoading: false,
                unreadMessageNumber: null,
                unreadMessageNumberTip: '无未读消息',
                LoginAdmin: {
                    userInfo: {
                        name: ''
                    }
                },
                updatePasswordDialog: false,
                updatePasswordForm: {

                },
                updatePasswordRules: {
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' },
                        { validator: checkPassword, trigger: 'blur' }
                    ]
                },
                headerSeachText: '',
                openTabs: [
                    { name: 'main', node: '-1', title: ' 首页', icon: "iconfont icon-main", url: basePath + '/admin/config/index' }
                ]
            }
        },
        methods: {
            showMsg() {
                this.$notify({
                    title: '自定义位置',
                    message: '右下角弹出的消息',
                    position: 'bottom-right'
                });
            },
            updatePassword() {
                vm.updatePasswordDialog = true;
            },
            updatePasswordSubmit() {

                vm.$refs['updatePasswordForm'].validate((valid) => {
                    if (valid) {
                        Ajax.update({
                            url: basePath + '/admin/system/updatePassword',
                            data: {
                                password: vm.updatePasswordForm.password
                            },
                            callback: function () {
                                vm.updatePasswordDialog = false;
                            }
                        })
                    }
                })

            },
            getLoginAdmin() {
                vm.LoginAdmin = {
                    loginId: '超级管理员'
                };
                vm.LoginAdmin.dateTime = new Date().Format('HH:mm:ss');
            },
            loadMenu() {
                Ajax.get({
                    url: basePath + '/admin/admin/loginAdminMenu',
                    callback: function (datas, length) {
                        vm.menus = datas;
                    }
                })
            },
            loadCache() {

            },
            tabClick(tab) {
                vm.tabValue = tab.name;
            },
            tabRemove(name) {
                for (var i in vm.openTabs) {
                    if (vm.openTabs[i].name == name) {
                        vm.openTabs.splice(i, 1);
                        vm.tabValue = vm.openTabs[i - 1].name;
                    }
                }
            },
            indexRender(index) {
                return index + 1;
            },
            serviceIdRender(row, column, cellValue) {
                row.serviceIdLabel = getListLabel('ServiceList', cellValue);
                return row.serviceIdLabel;
            },
            stateRender(row, column, cellValue) {
                var label = getTypeLabel('CustomerServiceState', cellValue);
                row.stateLabel = label;
                return row.stateLabel;
            },
            loadService() {

                this.states = getType('CustomerServiceState');
                /* var vm = this;
                vm.datas =  */

                /* getList('ServiceList' , function(data){
                    vm.services = data;
                    Ajax.list({
                  url:basePath + '/customer/customerService/list',
                  callback: function (datas) {
                    if (!validatePage(length)){return;}; vm.datas = datas;
                  }
                })
                }); */
            },
            openService() {

            },
            openEditScheme(id) {
                vm.openTag({ node: '-1-1' + id, name: 'editScheme' + (id || -1), title: '方案编辑', icon: "iconfont ", url: basePath + '/admin/schemeEdit?id=' + (id ? id : '') });
            },
            openHelp() {
                //vm.openTag ( { node:'-1-1' , name:'help' , title:'帮助手册' , icon:"iconfont " , url: basePath + '/pages/boss/toolbar/help' } );
            },
            openTag(opt) {
                var tag = filter(vm.openTabs, opt.node);
                if (tag) {
                    vm.tabValue = tag.name;
                } else {
                    vm.openTabs.push($.extend({}, opt, menuDefault));
                    vm.tabValue = opt.name;
                }
                return;
            },
            menuSelect(index, indexPath, params) {
                var menu = filter(vm.menus, index);
                if (params && Object.prototype.toString.call(params) == '[object String]') {
                    if (menu.url.indexOf('?') != -1) {
                        menu.url = menu.url.substring(0, menu.url.indexOf('?')) + "?" + params;
                    } else {
                        menu.url = menu.url + "?" + params
                    }
                }
                //console.log('params')
                //console.log(Object.prototype.toString.call(params) == '')
                var openStyle = menu.openStyle;

                if (!openStyle || openStyle == 'tab') {
                    // 判断是否已存在tabs
                    var tag = filter(vm.openTabs, index);
                    if (tag) {
                        vm.tabValue = tag.name;
                    } else {
                        $.ajax({
                            url: menu.url,
                            success: function (respone) {
                                if (respone.code == RESULTCODE.LOGON_FAILURE) {
                                    loginDialog();
                                } else {
                                    vm.openTabs.push($.extend({}, menu, menuDefault));
                                    vm.tabValue = menu.name;
                                }
                            },
                            error: function (respone) {
                                if (respone.status == 404) {
                                    vm.openTabs.push($.extend({}, menu, menuDefault));
                                    vm.tabValue = menu.name;
                                }
                            }
                        })
                    }
                    return;
                }
            },
            unreadMessageNumberTimer() {
                Ajax.query({
                    url: basePath + '/system/message/getUnReadTotal',
                    callback: function (data) {

                        if (data == 0) {
                            vm.unreadMessageNumber = null;
                            vm.unreadMessageNumberTip = '无未读消息';
                        } else {
                            vm.unreadMessageNumber = data;
                            vm.unreadMessageNumberTip = '未读消息：' + data + '条';
                        }

                        setTimeout(() => {
                            vm.unreadMessageNumberTimer();
                        }, 30000);
                    }
                })
            },

            fullScreen() {
                if (this.fullScreenIcon == 'iconfont icon-quanpingzuidahua') {	// 全屏
                    this.fullScreenIcon = 'iconfont icon-zuixiaohua';
                    this.fullScreenTitle = '展开菜单';
                    this.isCollapse = true;
                    $(".el-header").slideUp(500);
                    $(".el-aside").animate({ width: '64px' }, 500);
                    this.fullScreenShow = true;
                } else {
                    this.fullScreenIcon = 'iconfont icon-quanpingzuidahua';
                    this.fullScreenTitle = '收起菜单';
                    this.fullScreenShow = false;
                    this.isCollapse = false;
                    $(".el-header").slideDown(500);
                    $(".el-aside").animate({ width: '200px' }, 500);
                }
            }
        },
        mounted: function () {
            $('body').css('visibility', 'visible');
            this.loadMenu();
            var vm = this;
            setTimeout(function () {
                vm.getLoginAdmin();
                /* vm.unreadMessageNumberTimer();
            vm.loadService();*/
                //console.log(vm.openTabs)
            }, 500)

        }
    });


    function logout() {
        vm.loginOutLoading = true;
        Ajax.get({
            url: basePath + '/admin/system/loginout',
            callback: function () {
                message('登出成功', 'success')
                setTimeout(() => {
                    window.location = "/admin/system/login";
                }, 1000)
            }
        })
    }
</script>
</html>